﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			font-size: 14px;
			font-family: "Microsoft YaHei","SimSun";
		}
		.header{
			height: 58px;
            background: #191D3A;
		}
		.header .inner{
			width: 1000px;
			margin: 0 auto;
		}
		.header .inner .logo{
			float: left;
			height: 58px;
			width: 186px;
			text-indent: -999em;
			background: url('images/logo.png') no-repeat;
		}
		.header .inner .nav{
			float: left;
			margin-left: 39px;
		}
		.header .inner .nav ul{
			list-style: none;
		}
		.header .inner .nav li{
			float: left;
			height: 58px;
			width: 100px;
			line-height: 58px;
			text-align: center;
			border-left: 1px solid #252947;
		}
		.header .inner .nav li.last{
			border-right: 1px solid #252947;
		}
		.header .nav ul li a{
			display: block;
			height: 58px;
			color:#818496;
			text-decoration: none;
		}
		.header .inner .nav li a.current{
			background: #252947;
			color: white;
		}
		.header .inner .nav li a:hover{
			background: #252947;
			color:white;
		}
		.header .inner .jrwm{
			float: left;
			padding-left: 48px;
			padding-top: 12px;
		}
		.banner{
			height: 465px;
			background: url('images/banner.jpg') no-repeat center top;
			position: relative;
		}
		.banner .circle{
			height: 12px;
			width: 120px;
			/* background: pink; */
			position: absolute;
			left: 50%;
                        bottom:20px ;
                        margin-left:-60px;
          
		}
		.banner .circle ol{
			list-style: none;
			
		}
		.banner .circle ol li{
			float: left;
			width: 12px;
			height: 12px;
			background: url('images/yuandian2.png') no-repeat;
			margin-right: 15px;
		}
		.banner .circle ol li.last{
			margin-right: 0;
		}
		.banner .circle ol li.current{
			background: url('images/yuandian1.png') no-repeat;
		}
		.content{
			padding-top: 50px;
			background: url('images/indexmainbg.jpg') no-repeat center bottom;
		}
		.content .inner{
			/* height: 700px; */
			width: 1000px;
			margin: 0 auto;
		}
		.content .inner .product{
			height: 229px;
			border-bottom: 1px solid #DBE1E7;
			position: relative;
		}

		.content .inner .product ul{
			list-style: none;
		}
		.content .inner .product li{
		   float: left;
           width: 218px;
           margin-right: 43px;
		}
		.content .inner .product li.last{
		   width: 217px;
           margin-right: 0;
		}
		.content .inner .product li.pro_image{
           width: 100%;
           height: 130px;
		}
		.content .inner .product li h3{
		   text-align: center;
           line-height: 40px;
           font-weight: bold;
           font-size: 14px;
		}
		.content .inner .product li p.play{
			text-align: center;
		}
		.content .inner .product li p.play a{
			font-size: 12px;
			line-height: 12px;
			text-decoration: none;
			color: #38B774;
		}
		.content .inner .product .circle{
			background: white;
			height: 14px;
			width: 117px;
			position: absolute;
			left: 50%;
			bottom: -7px;
			margin-left: -59px;
		}
		.content .inner .product .circle ol{
			padding-left: 14px;
			list-style: none;
		}
		.content .inner .product .circle ol li{
			float: left;
			height: 14px;
			width: 12px;
			margin-right: 13px;
			background: url('images/yuandian4.png') no-repeat;
		}
		.content .inner .product .circle ol li.current{
			background: url('images/yuandian3.png') no-repeat;
		}
		.content .inner .product .circle ol li.last{
			margin-right: 0;
		}

		.content .inner .info{
			padding-top: 53px;
			
		}
		.content .inner .info .boyaanews{
			position: relative;
			float: left;
			width: 500px;
			padding-top: 109px;
			background: url('images/bynewsbg.jpg') no-repeat;
		}
		.content .inner .info .boyaajobs{
			float: left;
			width: 500px;
			/* height: 313px; */
			background: url('images/byhrbg3.jpg') no-repeat;
			position: relative;
		}
		.content .inner .info .boyaanews ul{
			list-style: none;
			padding: 0 20px;
		}
		.content .inner .info .boyaanews ul li{

			border-bottom: 1px solid #DBE1E7;
			line-height: 50px;
		}
		.content .info .boyaanews ul li span{
			font-size: 12px;
			color:#AFBECF;
			margin-right: 22px;
		}
		.content .inner .info .boyaanews ul li a{
			color:#444866;
			text-decoration: none;
			font-size: 14px;
		}
		.content .info .boyaanews .more{
			position: absolute;
			top: 40px;
			left: 218px;
			background-color: blue;
		}
		.content .info .boyaajobs{
			position: relative;
			
		}
		.content .info .boyaajobs .title{
			padding-top: 40px;
			padding-left: 78px;
			
		}
		.content .info .boyaajobs .title h3{
			width: 119px;
			height: 51px;
			background:url(images/zczp.png) no-repeat;
			text-indent: -999em;
		}
		.content .info .boyaajobs h4{
			padding-top: 18px;
			padding-left: 20px;
			color:white;
			font-size: 14px;
			font-weight: bold;
		}
		.content .info .boyaajobs ul{
			list-style: none;
			padding-left: 20px;
		}
		.content .info .boyaajobs ul li{
			width: 305px;
			border-bottom: 1px solid #6FDEA3;
			line-height: 37px;
		}
		.content .info .boyaajobs ul li a{
			font-size: 14px;
			color:white;
			text-decoration: none;	
		}
		.content .info .boyaajobs ul li a:hover{
			background-color: orange;
		}
		.content .info .boyaajobs .more2{
			position: absolute;
			top: 40px;
			left: 218px;
			background-color: blue;
		}
		.cl{
			clear: both;
		}
		.footer{
			height: 91px;
			background: #191D3A;
		}
		.footer .inner{
			width: 1000px;
			margin: 0 auto;
		}
		.footer .inner .leftpart{
			float: left;
			height: 91px;
            width: 300px;
            line-height: 91px;
		}
		.footer .inner .leftpart a{
			text-decoration: none;
			color: gray;
			font-size: 14px;
		}
		.footer .inner .rightpart{
			float: left;
			height: 91px;
            width: 700px;
            text-align: right;
			line-height: 91px;
			color: grey;
		}
		.footer .inner .rightpart .jinghui{
			height: 40px;
			position: relative;
			top: 20px;
		}
	</style>
</head>
<body>
<script type="text/javascript"></script>

	<div class="header">
		<div class="inner">
			<div class="logo">
				<a href="#">博雅</a>
			</div>
			<div class="nav">
				<ul>
					<li ><a href="#" class="current">首页</a></li>
					<li><a href="#" >四个文字</a></li>
					<li><a href="#">四个文字</a></li>
					<li><a href="#">四个文字</a></li>
					<li><a href="#">四个文字</a></li>
					<li class="last"><a href="#">投资者关系</a></li>
				</ul>
			</div>
			<div class="jrwm">
				<img src="images/jrwm.png"/></div>
			</div>
		</div>
		<div class="banner">
			<div class="circle">
				<ol>
					<li class="current"></li>
					<li></li>
					<li></li>
					<li></li>
					<li class="last"></li>
				</ol>
			</div>
		</div>
		<div class="content">
			<div class="inner">
				<div class="product">
					<ul>
						<li>
						<p class="pro_image">
							<img src="images/pro1.jpg" alt="" />
						</p>
						<h3>BPT宣传片</h3>
						<p class="play">
							<a href="">点击播放</a>
						</p>
						</li>
						<li>
							<p class="pro_image">
							<img src="images/pro1.jpg" alt="" />
						</p>
						<h3>BPT宣传片</h3>
						<p class="play">
							<a href="">点击播放</a>
						</p>
						</li>
						<li>
							<p class="pro_image">
							<img src="images/pro1.jpg" alt="" />
						</p>
						<h3>BPT宣传片</h3>
						<p class="play">
							<a href="">点击播放</a>
						</p>
						</li>
						<li class="last">
							<p class="pro_image">
							<img src="images/pro1.jpg" alt="" />
						</p>
						<h3>BPT宣传片</h3>
						<p class="play">
							<a href="">点击播放</a>
						</p>
						</li>
					</ul>
					<div class="circle">
				<ol>
					<li class="current"></li>
					<li></li>
					<li></li>
					<li class="last"></li>
				</ol>
			</div>
				</div>
				<div class="info">
				<div class="boyaanews">
				<a href="" class="more">
						<img src="images/more.png" alt="" />
					</a>
                <ul>
                <li>
							<span>09 / 28</span>
							<a href="">	
								2015博雅国际博客大赛（BPT）在澳门落幕
							</a>
						</li>
						<li>
							<span>09 / 28</span>
							<a href="">	
								2015博雅国际博客大赛（BPT）在澳门落幕
							</a>
						</li>
						<li>
							<span>09 / 28</span>
							<a href="">	
								2015博雅国际博客大赛（BPT）在澳门落幕
							</a>
						</li>
						<li>
							<span>09 / 28</span>
							<a href="">	
								2015博雅国际博客大赛（BPT）在澳门落幕
							</a>
						</li>
                </ul>
				</div>
				<div class="boyaajobs">
				<a href="" class="more2">
						<img src="images/more2.png" alt="" />
					</a>
				<div class="title">
						<h3>
							博雅招聘
						</h3>
					</div>
					<h4>专场招聘岗位:</h4>
					<ul>
						<li><a href="#">PHP开发工程师</a></li>
						<li><a href="#">C++开发工程师</a></li>
						<li><a href="#">WEB前端开发工程师</a></li>
						<li><a href="#">大数据开发工程师</a></li>
					</ul>
				</div>
				</div>
			</div>
		</div>
		<div class="cl"></div>
		<div class="footer">
			<div class="inner">
				<div class="leftpart">
					<a href="#">网站地图</a>
					<span>|</span>
					<a href="#">免费声明</a>
				</div>
				<div class="rightpart">文字文字文字文字文字文字<img src="images/govIcon.gif" class="jinghui">
				</div>
			</div>

		</div>
</body>
</html>